<script setup lang="ts">
import type { EnrollDetail } from '@/types/enroll'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { enrollStatusDesc, visitorTypeDesc } from '@/utils/common'
import { formatDate } from '@/utils/datetime'
import { getEnrollDetailApi } from '@/services/enroll'

//接收页面参数
const query = defineProps<{ id: number }>()

// 获取订单明细
const enroll = ref<EnrollDetail>()
const getTemplateDetailData = async () => {
  const res = await getEnrollDetailApi(query.id)
  enroll.value = res.data
}

// 页面加载
onLoad(async () => {
  await Promise.all([getTemplateDetailData()])
})
</script>

<template>
  <view class="enroll-detail">
    <view class="enroll-status-box box" v-if="enroll?.status == 1">
      <view class="enroll-status">
        <up-icon name="info-circle" color="#e45656" size="26"></up-icon>
        {{ enrollStatusDesc(enroll?.status) }}
      </view>
      <view>您已下单成功，请等待工作人员与您确认行程！</view>
    </view>
    <view class="enroll-info box">
      <view class="item">
        <view class="label">订单编号</view>
        <view class="value">{{ enroll?.id }}</view>
      </view>
      <view class="item">
        <view class="label">下单日期</view>
        <view class="value">{{ enroll?.create_time }}</view>
      </view>
      <view class="item">
        <view class="label">行程金额</view>
        <view class="value number">
          ￥<text>{{ enroll?.market_money }}</text>
        </view>
      </view>
      <view class="item">
        <view class="label">已支付</view>
        <view class="value number"> ￥<text>0</text> </view>
      </view>
    </view>

    <view class="template-box box">
      <image :src="enroll?.pic" />
      <view>{{ enroll?.name }}</view>
    </view>

    <view class="route-box box">
      <view class="item">
        <view class="date">{{ formatDate(enroll?.start, 'MM/dd') }}</view>
        <view>周{{ formatDate(enroll?.start, 'E') }}出发</view>
      </view>
      <view class="item">
        <view>
          {{ enroll?.adult_num }}成人
          <text v-if="enroll?.child_num">{{ enroll?.child_num }}儿童</text>
        </view>
        <view>全国出发</view>
      </view>
      <view class="item">
        <view class="date">{{ formatDate(enroll?.back, 'MM/dd') }}</view>
        <view>周{{ formatDate(enroll?.back, 'E') }}返回</view>
      </view>
    </view>

    <view class="linkman-info box">
      <view class="label">联系人</view>
      <view class="value">
        <up-icon name="account"></up-icon>
        <text>{{ enroll?.linkman }}</text>
        {{ enroll?.mobile }}
        <view class="hx-font hx-edit" v-if="enroll?.status == 1"></view>
      </view>
    </view>

    <view class="tourists-info box">
      <view class="title">出游人信息</view>
      <view class="item" v-for="tourist in enroll?.tourists" :key="tourist.id">
        <view class="row">
          <view class="label">{{ tourist.name }}</view>
          <view class="value">{{ tourist.mobile }}</view>
        </view>
        <view class="row">
          <view class="label">{{ visitorTypeDesc(tourist.type) }}</view>
          <view class="value">{{ tourist.credentials }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import './styles/detail.scss';
</style>
